<template>
    <div class="app-container" v-loading="fullscreenLoading">
        <el-row :gutter="10">
            <el-col :span="6" v-for="(item, index) in data.noGroupSimpleSensorVos" style="margin-top: 10px" :xs="12">
                <el-card>
                    <el-row :gutter="20">
                        <el-col :span="12" :xs="9">
                            <div style="text-align: center">
                                <svg-icon :icon-class="item.simpleIcon===null?'default':item.simpleIcon" style="width: 2.5em; height: 2.5em;"/>
                            </div>
                        </el-col>
                        <el-col :span="12" :xs="15" style="height: 40px">
                            <div style="font-size: 16px;margin-bottom: 5px;line-height: 20px;">{{
                                    item.sensorValue
                                }}{{ item.unit }}
                            </div>
                            <!--                                <div style="color: red;font-size: 18px;margin-bottom: 5px;height: 20px;line-height: 20px"-->
                            <!--                                     v-show="item.isOver===1"-->
                            <!--                                >-->
                            <!--                                    {{ item.value }}{{ item.unit }}-->
                            <!--                                </div>-->
                            <div style="font-size: 12px;color: #a5a5a5;">{{ item.sensorName }}</div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <div v-for="(i,k) in data.groups" :key="k" style="margin-top: 10px" v-show="data.groups.length>0">
            <div>
<!--                v-show="i.points.length>0"-->
                <div style="padding: 10px;color:black;">{{ i.groupName }}</div>
                <el-row :gutter="10">
                    <el-col :span="6" v-for="(item, index) in i.points" style="margin-top: 10px" :key="index" :xs="12">
                        <el-card>
                            <el-row :gutter="20">
                                <el-col :span="12" :xs="9">
                                    <div style="text-align: center">
                                        <svg-sensor-icon :icon-class="item.simpleIcon===null?'default':item.simpleIcon" style="width: 2.5em; height: 2.5em;"/>
                                    </div>
                                </el-col>
                                <el-col :span="12" :xs="15" style="height: 40px">
                                    <div style="font-size: 16px;margin-bottom: 5px;line-height: 20px;"
                                    >
                                        {{ item.sensorValue }}{{ item.unit }}
                                    </div>
                                    <!--                                <div style="color: red;font-size: 18px;margin-bottom: 5px;height: 20px;line-height: 20px"-->
                                    <!--                                     v-show="item.isOver===1"-->
                                    <!--                                >-->
                                    <!--                                    {{ item.value }}{{ item.unit }}-->
                                    <!--                                </div>-->
                                    <div style="font-size: 12px;color: #a5a5a5;">{{ item.sensorName }}</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div>
            <el-empty style="margin-top: 10px" description="暂无数据"
                      v-if="data.noGroupSimpleSensorVos.length===0&&data.groups.length===0"></el-empty>
        </div>

    </div>
</template>

<script>
import {listSimpleGroup} from '@/api/equipment/simpleGroup'

export default {
    name: 'equipmentSimple',
    data() {
        return {
            data: {
                noGroupSimpleSensorVos: [],
                groups: []
            },
            fullscreenLoading: false
        }
    },
    created() {
        this.getSimpleList()
    },
    methods: {
        // 获取简单信息点
        getSimpleList() {
            this.fullscreenLoading = true
            listSimpleGroup().then(res => {
                console.log(res)
                this.data = res.data
                this.fullscreenLoading = false
            })
        }
    }
}
</script>

<style scoped>
::v-deep .el-card {
    border-radius: 10px;
}
</style>
